<template>
  <f7-page>
    <f7-navbar back-link="返回" title="立即邀请" sliding>
      <!--<f7-nav-right>地图</f7-nav-right>-->
    </f7-navbar>

    <f7-list form>
      <f7-list-item radio name="my-radio" v-for="one in invite_todo" :title="one.text" @click="selRole(one.value)"></f7-list-item>
    </f7-list>
    <f7-toolbar>
      <div class="row button-foot">
        <div class="col col-50">
          <f7-button class="text-red" @click="popupInvite('io')">输入手机号邀请</f7-button>
        </div>
        <div class="col col-50">
          <f7-button class="text-red" @click="popupInvite('push')">通讯录批量邀请</f7-button>
        </div>
      </div>
    </f7-toolbar>


    <f7-popup :opened="myPop1">
      <f7-navbar>
        <div @click="popupInvite('close')">
          <f7-nav-left >
              <f7-icon f7="chevron_left"></f7-icon>
              <span class="Back">返回</span>
          </f7-nav-left>
        </div>
             手机号邀请
        <f7-nav-right >
          <f7-link>导入通讯录</f7-link>
        </f7-nav-right>
      </f7-navbar>

      <f7-page bg-color="#f5f5f5">
  
          <f7-list>
            <div v-for="(x,k) in waitPhoneList" >
              <div @click='addWait(k)'> {{k? '[-]': '[+]'}} </div>
              <f7-list-item>
                  <label class="item-sap">联系人</label>
                  <input type="text" placeholder="请输入" v-model="x.real_name" class="Please_inpt">
              </f7-list-item>
              <f7-list-item>
                  <label class="item-sap">手机号</label>
                  <input type="number" v-model="x.phone" placeholder="请输入" class="Please_inpt">
              </f7-list-item>
            </div>
              
          </f7-list>
          <f7-list-button class="bar bar-royal">
            <h1 class="title" @click="submit">立即邀请</h1>
          </f7-list-button>
      </f7-page>
    </f7-popup>

    <f7-popup :opened="overPop">
      <f7-navbar>
        <div @click="overInvite">
          <f7-nav-left >
              <f7-icon f7="chevron_left"></f7-icon>
              <span class="Back">返回</span>
          </f7-nav-left>
        </div>
             邀请成功
        <f7-nav-right >
          <f7-link></f7-link>
        </f7-nav-right>
             
      </f7-navbar>

      <f7-page bg-color="#f5f5f5">
  
          <f7-list>
          {{inviteResult}}
            <f7-list-item v-for="(x,k) in inviteResult.offline">
            {{waitPush.text}}姓名{{x.real_name}}电话{{x.phone}}
            </f7-list-item>
            <f7-list-item title='在线用户'></f7-list-item>
            <f7-list-item v-for="(x,k) in inviteResult.online">
            {{waitPush.text}}姓名{{x.real_name}},电话{{x.phone}}
            </f7-list-item>
          </f7-list>
      </f7-page>
    </f7-popup>
  </f7-page>

</template>

<script>
  let waitPush={}
  export default {
    name: 'app',
    data: function () {
      return {
        myPop1: false,
        overPop: false,
        picked: 2,
        checkedNames: [],
        invite_todo: [
          {text: '同事 - 物流总负责人', url: '/mine/traffic_tixianset/', value: {text: '同事 - 物流总负责人',role: "TRAFFIC_ADMIN",type: "COMPANY_INVITE"}},
          {text: '同事 - 物流管理员', url: '/mine/traffic_tixianset/', value: {text: '同事 - 物流管理员',role: "TRAFFIC_EMPLOYEE",type: "COMPANY_INVITE"}},
          {text: '同事 - 外部合作车队', url: '/mine/traffic_tixianset/', value: {text: '同事 - 外部合作车队',role: "TRAFFIC_CAPTAIN",type: "COMPANY_INVITE"}},
          {text: '客户 - 货源方', url: '/mine/traffic_tixianset/', value: {text: '客户 - 货源方', type: 'FRIEND' ,role:'OWNER', friend_extend: 'trade'}},
          {text: '客户 - 挂靠司机', url: '/mine/traffic_tixianset/', value: {text: '客户 - 挂靠司机',friend_extend: "driver",role: "TRAFFIC_DRIVER_PRIVATE",type: "FRIEND"}}
          ],
        waitPhoneList: [{real_name: '', phone: ''}],
        inviteResult:{offline:[], online:[]},
        waitPush: waitPush,
      }
    },
    components: {
      
    },
    methods: {
      onOpen: function () {
        this.sorting = !this.sorting;
      },
      onClose: function () {
        this.sorting = !this.sorting;
      },
      onSort: function (event, indexes) {
      },
      popupInvite(type){
        if(type=='io'){
          if(waitPush.role){
            this.myPop1=true;
          }else{
            alert('请选择邀请角色')
          }
          
        }
        if(type=='close'){
          this.myPop1=false;
        }
      },
      selRole(one){
        waitPush=one;
      },
      async submit(){
        waitPush['users']=this.waitPhoneList;
        // 传参字段检查
        this.submit=(await this.mineService.applyRelationInviteNew(waitPush)).data;
        if(this.submit.status=='err'){
          alert(this.submit.msg)
        }else if(this.submit.status=='success'){
          this.inviteResult=this.submit.data;
          console.info('添加成功', this.inviteResult)
          // 打开另外一个模态框
          this.myPop1=false;
          this.overPop=true;
        }else{
          alert('其他故障')
        }
        
      },
      addWait(k){
        if(k){
          this.waitPhoneList.splice(k,1)
        }else{
          this.waitPhoneList.push({
                    real_name: '', phone: ''
                  })
        }        
      },
      overInvite(){
        this.overPop=false;
      }
    }
    
  }
</script>

<style scoped>
  .row {
    margin: 0px 10px;
  }

  .col-25 {
    float: left;
    text-align: center;
    position: relative;
    margin-bottom: 25px;
  }

  i.f7-icons {
    display: inherit;
    height: 30px;
  }

  .text-gray {
    font-family: verdana, 'Hiragino Sans GB', 'Microsoft Yahei', 微软雅黑,
    'Helvetica Neue', Helvetica, Arial, sans-serif;
    color: #333;
    font-weight: 400;
    margin-top: 7px;
    font-size: 12px;
  }

  .text-purple {
    color: #a3a2f0;
  }

  .ios .navbar .right {
    margin-left: 10px;
    color: #fff;
    font-size: 14px;
  }

  .bg-master {
    position: relative;
    background: url('../../assets/img/bg-master.jpg') no-repeat center -53px;
    background-size: 100% 150px;
    padding-bottom: 15px;
  }

  .bg-master h2 {
    color: #fff;
    font-size: 20px;
    white-space: normal;
    display: inherit;
    padding: 12px 0 9px 24px;
    margin: 0;
  }

  .bg-master h4 {
    color: #fff;
    font-size: 12px;
    white-space: normal;
    display: inherit;
    padding: 0px 0 30px 24px;
    margin: 0;
  }

  .role-icon {
    vertical-align: middle;
    background: #9db7ff;
    color: #fff;
    font-size: 12px;
    border-radius: 20px;
    padding: 2px 8px;
    margin-left: 10px;
  }

  .logo-icon {
    position: absolute;
    right: 24px;
    top: 9px;
    width: 80px;
    height: 80px;
    border: 3px solid rgba(255, 255, 255, 0.3);
    border-radius: 100%;
    background: #f0f0f0;
  }

  .logo-icons {
    width: 48px;
    height: 48px;
    border-radius: 100%;
  }

  .ios .card {
    margin: 0 24px 20px 24px;
    padding: 10px 10px;
    border-radius: 5px;
  }

  .text-center_tite {
    font-size: 16px;
    color: #333;
  }

  .text-center_footer {
    font-size: 12px;
    color: #666;
  }

  .text-center_footer span {
    margin-right: 3px;
  }

  .ios .card-header,
  .ios .card-footer {
    min-height: 40px;
    padding: 0px 15px;
    position: initial;
  }

  .item-face {
    position: absolute;
    right: 15px;
    top: 5px;
  }

  .text-gray2 {
    color: #e5e5e5;
    font-size: 12px;
    display: inherit;
  }

  .ios .list {
    margin: 0;
  }

  .ios .page {
    background: #fff;
  }
</style>
